<!-- 现场勘探 -->
<template>
  <div>
    <card :bordered="false">
      <p slot="title">现场勘探</p>
      <Form ref="form" :model="info" :rules="rules">
        <table v-if="!loading" id="reconnaissanceTrip" width='100%' border="1" cellspacing="0" cellpadding="0" ref="print">
          <tr>
            <th colspan="4">现场勘探表</th>
          </tr>
          <tr>
            <td width="25%">项目编号</td>
            <td colspan="3">
              {{info.Project_number}}
            </td>
          </tr>
          <tr>
            <td width="25%">
              <Icon type="ios-medical" color="#ff6868" />
              项目名称
            </td>
            <td colspan="3">
              <FormItem prop="Project_name">
                <Input v-model="info.Project_name" />
              </FormItem>
              <Oldname v-show="oldNameShow" :oldName="pt2List"></Oldname>
            </td>
          </tr>
          <tr>
            <td width="25%">
              <Icon type="ios-medical" color="#ff6868" />
              建设单位
            </td>
            <td colspan="3">
              <FormItem prop="Build_unit">
                <Input v-model="info.Build_unit" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td width="25%">
              法人
            </td>
            <td width="25%">
              <Input v-model="info.Legal_person" />
            </td>
            <td width="25%">
              <Icon type="ios-medical" color="#ff6868" />
              联系人
            </td>
            <td width="25%">
              <FormItem prop="Linkman">
                <Input v-model="info.Linkman" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td width="25%">
              通讯地址
            </td>
            <td colspan="3">
              <Input v-model="info.Mail_address" />
            </td>
          </tr>
          <tr>
            <td width="25%">
              <Icon type="ios-medical" color="#ff6868" />
              联系电话
            </td>
            <td width="25%">
              <FormItem prop="Tel_number">
                <Input v-model="info.Tel_number" />
              </FormItem>
            </td>
            <td width="25%">邮政编码</td>
            <td>
              <Input v-model="info.Mail_zip_code" />
            </td>
          </tr>
          <tr>
            <td width="25%">
              <Icon type="ios-medical" color="#ff6868" />
              建设地点
            </td>
            <td colspan="3">
              <FormItem prop="Build_address">
                <Input v-model="info.Build_address" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td width="25%">
              立项审批部门
            </td>
            <td>
              <Input v-model="info.Project_approval_unit" />
            </td>
            <td>项目代码</td>
            <td>
              <Input v-model="info.Project_code" />
            </td>
          </tr>
          <tr>
            <td>
              建设性质
            </td>
            <td>
              <Input v-model="info.Bulid_property" />
            </td>
            <td>国民经济行业类型</td>
            <td>
              <Input v-model="info.Economy_industry_type" />
            </td>
          </tr>
          <tr>
            <td>占地面积（平方米）</td>
            <td>
              <Input v-model="info.Floor_space"></Input>
            </td>
            <td>绿化面积（平方米）</td>
            <td>
              <Input v-model="info.Green_space"></Input>
            </td>
          </tr>
          <tr>
            <td>总投资（万元）</td>
            <td>
              <Input v-model="info.Total_investment"></Input>
            </td>
            <td>环评合同额（万元）</td>
            <td>
              <Input v-model="info.Contract_amount"></Input>
            </td>
          </tr>
          <tr>
            <td>
              土地文件
            </td>
            <td>
              <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button>上传</Button>
              </Upload>
            </td>
            <td>
              <Icon type="ios-medical" color="#ff6868" />
              土地相符性</td>
            <td>
              {{info.Land_conformity}}
            </td>
          </tr>
          <tr>
            <td>
              规划文件</td>
            <td>
              <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button>上传</Button>
              </Upload>
            </td>
            <td>
              <Icon type="ios-medical" color="#ff6868" />
              规划相符性</td>
            <td>
              {{info.Planning_conformity}}
            </td>
          </tr>
          <tr>
            <td>
              立项文件</td>
            <td>
              <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button>上传</Button>
              </Upload>
            </td>
            <td>可研/项目计划书</td>
            <td>
              <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button>上传</Button>
              </Upload>
            </td>
          </tr>
          <tr>
            <td>
              项目坐标
            </td>
            <td colspan="3">
              经度99.9999，纬度99.9999
              <Button>查看地图</Button>
            </td>
          </tr>
          <tr>
            <td rowspan="2">
              建设内容</td>
            <td colspan="3">
              <Table border style="overflow-x:none" highlight-row ref="selection" :columns="buildingContentListOption"
                :data="buildingContentList" class="tabsty" @on-row-click="getIndex"></Table>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <Button type="primary" @click="inputAdd('buildingContentList')">添加</Button>
              <Button type="error" @click="inputRemove('buildingContentList')">删除</Button>
            </td>
          </tr>
          <tr>
            <td rowspan="7" width="25%">
              公用工程</td>
            <td width="25%">供水方式</td>
            <td colspan="2">
              <Input v-model="publicProjectList.Water_supply_method" />
            </td>
          </tr>
          <tr>
            <td width="25%">供电方式</td>
            <td colspan="2">
              <FormItem prop="Power_supply_method">
                <Input v-model="publicProjectList.Power_supply_method" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td rowspan="3">排水去向</td>
            <td colspan="2">排水：
              <RadioGroup v-model="publicProjectList.IsSewage">
                <Radio label="是">
                  <span>是</span>
                </Radio>
                <Radio label="否">
                  <span>否</span>
                </Radio>
              </RadioGroup>
            </td>
          </tr>
          <tr>
            <td style="text-align: left">纳污水体：
              <Input v-model="publicProjectList.Sewage_water" />
            </td>
            </td>
            <td style="text-align: left">纳污水体功能：
              <Input v-model="publicProjectList.Sewage_water_ability" />
            </td>
          </tr>
          <tr>
            <td style="text-align: left">排污路径：
              <Input v-model="publicProjectList.Sewage_path" />
            </td>
            <td style="text-align: left">污水处理厂：
              <Input v-model="publicProjectList.Sewage_plant" />
            </td>
          </tr>
          <tr>
            <td>供热取暖
            </td>
            <td colspan="2">
              <FormItem prop="Provide_heat">
                <Input v-model="publicProjectList.Provide_heat" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td>燃料及供应方式</td>
            <td colspan="2">
              <FormItem prop="Fuel_supply">
                <Input v-model="publicProjectList.Fuel_supply" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td>
              <Icon type="ios-medical" color="#ff6868" />
              劳动定员</td>
            <td>
              <FormItem prop="Labor_quota">
                <Input v-model="info.Labor_quota" />
              </FormItem>
            </td>
            <td>住宿：
              <RadioGroup v-model="whether">
                <Radio label="yes">
                  <span>是</span>
                  10人
                </Radio>
                <Radio label="no">
                  <span>否</span>
                </Radio>
              </RadioGroup>
            </td>
            <td>食堂：
              <RadioGroup v-model="whether">
                <Radio label="yes">
                  <span>是</span>
                  10人
                </Radio>
                <Radio label="no">
                  <span>否</span>
                </Radio>
              </RadioGroup>
            </td>
          </tr>
          <tr>
            <td>
              生产规模
            </td>
            <td>
              <FormItem prop="Production_scale">
                <Input v-model="info.Production_scale" />
              </FormItem>
            </td>
            <td>
              生产工艺
            </td>
            <td>
              <FormItem prop="Production_process">
                <Input v-model="info.Production_process" />
              </FormItem>
            </td>
          </tr>
          <tr>
            <td rowspan="2">
              生产设备情况
            </td>
            <td colspan="3">
              <Table border ref="selection" :columns="equipmentListOption" :data="equipmentList" class="tabsty"
                @on-row-click="getIndex"></Table>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <Button type="primary" @click="inputAdd('equipmentList')">添加</Button>
              <Button type="error" @click="inputRemove('equipmentList')">删除</Button>
            </td>
          </tr>
          <tr>
            <td rowspan="2">
              周围敏感点情况</td>
            <td colspan="3">
              <!-- 待解决 -->
              <Table border style="overflow-x:hidden" ref="selection" :columns="pointsListOption" :data="pointsList"
                class="tabsty" @on-row-click="getIndex"></Table>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <Button type="primary" @click="inputAdd('pointsList')">添加</Button>
              <Button type="error" @click="inputRemove('pointsList')">删除</Button>
            </td>
          </tr>
          <tr>
            <td rowspan="2">周围企业情况</td>
            <td colspan="3">
              <div style="width:99%;margin:auto;height:100%;">
                <!-- 待解决 -->
                <Table border ref="selection" :columns="surroundCompanyListOption" :data="surroundCompanyList" class="tabsty"></Table>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <Button type="primary" @click="inputAdd('surroundCompanyList')">添加</Button>
              <Button type="error" @click="inputRemove('surroundCompanyList')">删除</Button>
            </td>
          </tr>
          <tr>
            <td>
              场地现状</td>
            <td>
              <FormItem prop="Site_status">
                <Input v-model="info.Site_status" />
              </FormItem>
            </td>
            <td>原有污染情况</td>
            <td>
            </td>
          </tr>
          <tr>
            <td>
              群众对项目意见</td>
            <td>
              <Input v-model="info.Masses_opinions" />
            </td>
            <td>其他搜集到的资料</td>
            <td><Button>上传</Button></td>
          </tr>
          <tr>
            <td>
              项目合同</td>
            <td><Button>上传</Button></td>
            <td>项目委托书</td>
            <td><Button>上传</Button></td>
          </tr>
          <tr>
            <td>
              现场存在的环境问题</td>
            <td>
              <Input v-model="info.Scene_problems" />
            </td>
            <td>现场影像</td>
            <td>
            </td>
          </tr>
          <tr>
            <td>
              勘探人员</td>
            <td>
              <Input v-model="info.Survey_personnel" />
            </td>
            <td>勘探日期</td>
            <td>
              <Input v-model="info.Survey_personnel" />
            </td>
          </tr>
        </table>
      </Form>
      <table width='100%' border="1" cellspacing="0" cellpadding="0">
        <tr>
          <th>项目周围环境概况图</th>
        </tr>
        <tr>
          <td>
            请至少上传两张现场照片

            <div id="upload-List">
              <div class="demo-upload-list" v-for="item in uploadList">
                <template v-if="item.status === 'finished'">
                  <img :src="item.url">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
              </div>
              <Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess"
                :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload" multiple type="drag" action="http://localhost:8081/eao/fileUpload/uploadAvatar"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
              <Modal title="View Image" v-model="visible">
                <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
              </Modal>
            </div>
          </td>
        </tr>
      </table>
      <Row type="flex" justify="space-between" class="topmargin">
        <Col span="4">
        <PrintButton v-if="flag" Url="print/printSurver" :Project_id="info.Id"></PrintButton>
        </Col>
        <Col span="4">
        <div style="float: right">
          <Button type="primary" @click="submit('save')">保存</Button>
          <Button type="primary" @click="submit('submit')">提交</Button>
        </div>
        </Col>
      </Row>
      <StepBar :status="2" />
    </card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        flag: false,
        oldNameShow: true,
        loading: true,
        pt2List: {},
        defaultList: [],
        imgName: "",
        visible: false,
        uploadList: [],
        /* 创建项目data */
        info: {},
        equipmentList: [],
        buildingContentList: [],
        pointsList: [],
        surroundCompanyList: [],
        // 公用工程
        publicProjectList: {},
        allIndex: "",
        rules: {
          Project_name: {
            required: true,
            trigger: "blur",
            message: "项目名称不能为空"
          },
          Build_unit: {
            required: true,
            trigger: "blur",
            message: "建设单位不能为空"
          },
          Legal_person: {
            required: true,
            trigger: "blur",
            message: "法人不能为空"
          },
          Linkman: {
            required: true,
            trigger: "blur",
            message: "联系人不能为空"
          },
          Mail_address: {
            required: true,
            trigger: "blur",
            message: "通讯地址不能为空"
          },
          Tel_number: {
            required: true,
            trigger: "blur",
            message: "联系电话不能为空"
          },
          Build_area_code: {
            required: true,
            trigger: "blur",
            message: "建设地点不能为空"
          }
        },
        buildingContentListOption: [{
            type: "index",
            width: 60,
            align: "center"
          },
          {
            title: "建筑名称",
            key: "Building_name",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Building_name
                },
                on: {
                  "on-blur": val => {
                    this.buildingContentList[index][
                      "Project_id"
                    ] = this.$route.query.Project_id;
                    this.buildingContentList[index].Building_name =
                      val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "建筑面积、数量、结构、层数、功能等",
            key: "Content",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Content
                },
                on: {
                  "on-blur": val => {
                    this.buildingContentList[index].Content = val.target.value;
                  }
                }
              });
            }
          }
        ],
        equipmentListOption: [{
            type: "index",
            width: 60,
            align: "center"
          },
          {
            title: "设备名称",
            key: "Equipment",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Equipment
                },
                on: {
                  "on-blur": val => {
                    this.equipmentList[index][
                      "Project_id"
                    ] = this.$route.query.Project_id;
                    this.equipmentList[index].Equipment = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "数量",
            key: "Model",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Quantity
                },
                on: {
                  "on-blur": val => {
                    this.equipmentList[index].Quantity = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "规格型号",
            key: "Model",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Model
                },
                on: {
                  "on-blur": val => {
                    this.equipmentList[index].Model = val.target.value;
                  }
                }
              });
            }
          }
        ],
        surroundCompanyListOption: [{
            type: "index",
            width: 60,
            align: "center"
          },
          {
            title: "企业名称",
            key: "Company",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Company
                },
                on: {
                  "on-blur": val => {
                    this.surroundCompanyList[index][
                      "Project_id"
                    ] = this.$route.query.Project_id;
                    this.surroundCompanyList[index].Company = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "方位/距离m ",
            key: "Sc_distance",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Sc_distance
                },
                on: {
                  "on-blur": val => {
                    this.surroundCompanyList[index].Sc_distance =
                      val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "从事生产",
            key: "Engage",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Engage
                },
                on: {
                  "on-blur": val => {
                    this.surroundCompanyList[index].Engage = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "排污情况",
            key: "Discharge",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Discharge
                },
                on: {
                  "on-blur": val => {
                    this.surroundCompanyList[index].Discharge = val.target.value;
                  }
                }
              });
            }
          }
        ],
        pointsListOption: [{
            type: "index",
            width: 60,
            align: "center"
          },
          {
            title: "敏感点名称",
            key: "Sensitive_name",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Sensitive_name
                },
                on: {
                  "on-blur": val => {
                    this.pointsList[index][
                      "Project_id"
                    ] = this.$route.query.Project_id;
                    this.pointsList[index].Sensitive_name = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "方位/距离m",
            key: "Distance",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Distance
                },
                on: {
                  "on-blur": val => {
                    this.pointsList[index].Distance = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "户数/人口（人）",
            key: "Households",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Households
                },
                on: {
                  "on-blur": val => {
                    this.pointsList[index].Households = val.target.value;
                  }
                }
              });
            }
          },
          {
            title: "环境功能区及级别",
            key: "Env_fun_level",
            render: (h, {
              row,
              index
            }) => {
              return h("Input", {
                props: {
                  type: "text",
                  value: row.Env_fun_level
                },
                on: {
                  "on-blur": val => {
                    this.pointsList[index].Env_fun_level = val.target.value;
                  }
                }
              });
            }
          }
        ],
        whether: "yes"
      };
    },
    created() {
      //判断是否有ID
      if (this.$route.query.Project_id && this.$route.query.Project_id != "") {
        this.getProject(this.$route.query.Project_id || this.$route.query.id);
      } else {
        //跳转首页
        this.$router.push({
          name: "index"
        });
      }
    },
    mounted() {
      this.uploadList = this.$refs.upload.fileList;
    },
    methods: {
      handleView(name) {
        this.imgName = name;
        this.visible = true;
      },
      handleRemove(file) {
        const fileList = this.$refs.upload.fileList;
        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      },
      handleSuccess(res, file) {
        file.name = file.name
        file.url = 'http://39.105.60.116:8080/file/misc/tmp/' + file.name
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: "The file format is incorrect",
          desc: "File format of " +
            file.name +
            " is incorrect, please select jpg or png."
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: "Exceeding file size limit",
          desc: "File  " + file.name + " is too large, no more than 2M."
        });
      },
      handleBeforeUpload() {
        const check = this.uploadList.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: "Up to five pictures can be uploaded."
          });
        }
        return check;
      },
      inputRemove(type) {
        this[type].splice(this.allIndex, 1);
        console.log(this[type] + ' 被删除了')
      },
      getIndex(data, index, event) {
        this.allIndex = index;
      },
      //点击添加意见
      inputAdd(type) {
        this[type].push({});
      },
      // 建筑内容
      buildingContentListFn() {
        let buildingContentList = this.buildingContentList;
        return axios.post("/buildingcontent/saveOrUpdate", {
          buildingContentList
        });
      },
      //机器
      productEquipmentListFn() {
        let productEquipmentList = this.equipmentList;
        return axios.post("/productEquipment/saveOrUpdateProductEquipment", {
          productEquipmentList
        });
      },
      //敏感
      sensitivePointsListFn() {
        let sensitivePointsList = this.pointsList;
        return axios.post("/sensitivePoints/addOrUpdate", {
          sensitivePointsList
        });
      },
      //周围
      surroundCompanyListFn() {
        let surroundCompanyList = this.surroundCompanyList;
        return axios.post("/surroundCompany/saveOrUpdate", {
          surroundCompanyList
        });
      },
      // 公用工程
      publicProjectListFn() {
        let publicProjectList = this.publicProjectList
        publicProjectList["Project_id"] = this.$route.query.Project_id;
        publicProjectList = new Array(publicProjectList)
        return axios.post('/publicProject/saveOrUpdatePublicProject', {
          publicProjectList
        })
      },
      // 保存 save / 提交 submit
      submit(type) {
        // 验证
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          let info = this.info;
          info.btn_way = type == "save" ? 1 : 2;
          info.Perject_type = type == "save" ? 3 : 3;

          axios.all([this.buildingContentListFn(), this.productEquipmentListFn(), this.sensitivePointsListFn(),
            this.surroundCompanyListFn(), this.publicProjectListFn()
          ]).then(axios.spread(function (buildingContentList, productEquipmentList, sensitivePointsList,
            surroundCompanyList, publicProjectList) {

          }));
          axios.post('/projectInformation/saveOrUpdateProject', info).then((res) => {
            if (res._STATUS == 1) {
              let title = res._MESSAGE

              if (type == 'save') {
                this.$Modal.success({
                  title,
                })
              } else {
                this.$router.push({
                  name: "environmentQuality",
                  query: {
                    Project_id: this.$route.query.Project_id
                  }
                })
              }
            } else {
              // 提示
              this.$Modal.error({
                title,
              })
            }
          })
        });
      },
      /* 获取当前创建项目 */
      getProject(id) {
        axios
          .get("/projectInformation/findProjectByID", {
            params: {
              id
            }
          })
          .then(res => {
            this.info = res.info;
            this.pt2List = res.pt2List
            if (this.info.Project_name == this.pt2List[this.pt2List.length - 1].Project_name) {
              this.oldNameShow = false
            }
            this.equipmentList = res.equipmentList;
            this.buildingContentList = res.buildingContentList;
            this.pointsList = res.pointsList;
            this.surroundCompanyList = res.surroundCompanyList;
            if (!res.publicProjectList[0]) {
              this.publicProjectList = {}
            } else {
              this.publicProjectList = res.publicProjectList[0]
            }
            localStorage.projectType = this.info.Perject_type
            this.loading = false
            this.flag = true
          })
          .catch(err => {
            alert("请求崩溃");
          });
      },
      handerUpload(file) {
        this.file = file;
      }
    }
  };
</script>
<style lang="less">
  .topmargin {
    margin-top: 10px;
  }

  #reconnaissanceTrip {
    .ivu-input {
      border: none !important;
      text-align: center;

      input {
        outline: medium;
      }
    }

    .ivu-table-tip {
      overflow-x: hidden;
    }
  }

  #upload-List {
    .demo-upload-list {
      display: inline-block;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      margin-right: 4px;
    }

    .demo-upload-list img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }

    .demo-upload-list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }
  }
</style>